<template>
    <div style="flex: 1;height: 100%" :style="{'height': height}">
        <div class="nullContent" v-if="nullContent"><img style="height: 100px;"
                                                         src="../../assets/images/nullContent.png" alt="">暂无数据
        </div>
        <div ref="dom" style="display: flex;flex: 1;height: 100%" v-show="!nullContent"></div>
    </div>
</template>

<script>
import resize from './mixins/resize';
export default {
    mixins: [resize],
    name: 'ChartLine',
    props: {
        unit: String,
        unitRight: String,
        unitRightSecond: String,
        value: Object,
        height: String,
        isRight: {
            type: Boolean,
            default: false
        },
        hasMin: {
            type: Boolean,
            default: false
        },
        legendShow: {
            type: Boolean,
            default: true
        }
    },
    data () {
        return {
            chart: null,
            nullContent: false
        };
    },
    watch: {
        value: {
            handler: 'initChart',
            immediate: true,
            deep: true
        }
    },
    mounted () {
        this.initChart();
    },
    beforeDestroy () {
        if (!this.chart) {
            return;
        }
        this.chart.dispose();
        this.chart = null;
    },
    methods: {
        initChart () {
            this.$nextTick(() => {
                let option = {};
                if (this.value.data && this.value.data[0] && this.value.data[0].data.length > 0) {
                    this.nullContent = false;
                    let colors = ['#0093FF', '#FF8D02', '#813fe3', '#8edc18'];
                    option = {
                        color: colors,
                        legend: {
                            orient: 'horizontal',
                            data: this.value.legend,
                            top: '0px',
                            right: this.isRight ? '10%' : 'auto',
                            show: this.legendShow
                        },
                        grid: {
                            top: this.legendShow ? '50px' : '30px',
                            bottom: '40px',
                            left: '60px',
                            right: this.unitRightSecond ? '160px' : '60px'
                        },
                        tooltip: {
                            trigger: 'axis',
                            backgroundColor: 'rgba(255, 255, 255, 0.85)',
                            textStyle: {
                                color: 'rgba(0,0,0,0.65)'
                            },
                            extraCssText: 'box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3)'
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: this.value.date
                        },
                        yAxis: [{
                            name: this.unit ? `${this.unit}` : '',
                            type: 'value',
                            minInterval: 1,
                            axisLabel: {
                                color: '#0093FF',
                                fontSize: 14
                            },
                            nameTextStyle: {
                                fontSize: 14,
                                color: 'rgba(0, 0, 0, 1)',
                                fontWeight: 400
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dotted'
                                }
                            },
                            min: (value) => {
                                return this.hasMin ? parseInt(value.min) : 0;
                            }
                        }, {
                            name: this.unitRight ? `${this.unitRight}` : '',
                            type: 'value',
                            show: this.unitRight,
                            minInterval: 1,
                            axisLabel: {
                                color: '#FF8D02',
                                fontSize: 14
                            },
                            nameTextStyle: {
                                fontSize: 14,
                                color: 'rgba(0, 0, 0, 1)',
                                fontWeight: 400
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dotted'
                                }
                            }
                        },
                        {
                            name: this.unitRightSecond ? `${this.unitRightSecond}` : '',
                            type: 'value',
                            offset: 100,
                            show: this.unitRightSecond,
                            minInterval: 1,
                            axisLabel: {
                                color: '#813fe3',
                                fontSize: 14
                            },
                            nameTextStyle: {
                                fontSize: 14,
                                color: 'rgba(0, 0, 0, 1)',
                                fontWeight: 400
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dotted'
                                }
                            }
                        }]
                    };
                    let data = [];
                    let areaColors = [['#0093FF', '#219cab03'], ['#FF8D02', '#fcefdf'], ['#813fe3', '#cfd1f9']];
                    this.value.data.forEach((val, key) => {
                        let noKey = {
                            name: val.name,
                            type: 'line',
                            symbol: 'none',
                            showSymbol: true,
                            data: val.data,
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: areaColors[key][0]
                                },
                                {
                                    offset: 1,
                                    color: areaColors[key][1]
                                }
                                ])
                            }
                        };
                        if (this.unitRight || this.unitRightSecond) {
                            data.push({ ...noKey, yAxisIndex: key });
                        } else {
                            data.push(noKey);
                        }
                    });
                    option.series = data;
                } else {
                    this.nullContent = true;
                    option = {
                        // title: {
                        //     show: true,
                        //     textStyle: {
                        //         color: '#c5c8ce',
                        //         fontSize: 20,
                        //         fontWeight: 'normal'
                        //     },
                        //     text: '暂无数据',
                        //     left: 'center',
                        //     top: 'center'
                        // },
                        xAxis: {
                            show: false
                        },
                        yAxis: {
                            show: false
                        },
                        series: []
                    };
                }

                this.chart = echarts.init(this.$refs.dom);
                this.chart.clear();
                this.chart.setOption(option);
            });
        }
    }
};
</script>
<style scoped>

</style>
